import React, { useMemo } from "react";
import { Button, Space, Switch, Table, Tag } from "antd";
import { useLoaderData } from "react-router-dom";
function TableList({
  list,
  delFn,
  editFn,
  addFn,
  pageSize = 6,
  total = 0,
  page = 1,
  onChange = () => {},
}) {
  const AuthShow = useLoaderData();
  const delBtnShow = useMemo(() => {
    return AuthShow.includes("delete");
  }, [AuthShow]);
  const enitBtnShow = useMemo(() => {
    return AuthShow.includes("edit");
  }, [AuthShow]);
  const addBtnShow = useMemo(() => {
    return AuthShow.includes("add");
  }, [AuthShow]);
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "岗位",
      dataIndex: "job",
      render(_, record) {
        const colors = { 总经理: "blue", 销售员: "green", 销售助理: "red" };
        return <Tag color={colors[record.job]}>{record.job}</Tag>;
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      render(_, record) {
        return <Switch checked={record.status === 1} />;
      },
    },
    {
      title: "地址",
      dataIndex: "schema_name",
    },
    {
      title: "时间",
      dataIndex: "create_time",
    },
    {
      title: "操作",
      render(_, record) {
        return (
          <Space>
            {delBtnShow && (
              <Button
                onClick={() => {
                  delFn(record);
                }}
              >
                删除
              </Button>
            )}
            {enitBtnShow && (
              <Button
                onClick={() => {
                  editFn(record);
                }}
              >
                编辑
              </Button>
            )}
          </Space>
        );
      },
    },
  ];
  return (
    <div>
      {addBtnShow && (
        <Button
          onClick={() => {
            addFn();
          }}
        >
          新增
        </Button>
      )}
      <Table
        dataSource={list}
        columns={columns}
        rowKey={"id"}
        pagination={{
          onChange: onChange,
          pageSize: pageSize,
          current: page,
          total: total,
        }}
      />
    </div>
  );
}

export default React.memo(TableList);
